<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>陈宇的简历</title>
  <script type="text/javascript">
    // smartphone
    if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
      location.href = './sp.html';
    }
  </script>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="js/lib/cosyer.css">
  <script src="js/lib/highlight.pack.js"></script>
  <script src="js/lib/jquery-2.1.0.min.js"></script>
  <script src="js/lib/skrollr.js"></script>
  <script src="js/script.js"></script>
  <link rel="shortcut icon" href="http://mydearest.cn/favicon.ico">
</head>

<body>

  <div id="home" data-3500="top:0px;" data-3510="top:-1%;" data-5200="top:-100%;">
    <div class="side">
      <dl>
        <dt>OPEN FILES</dt>
        <dd class="file current">cosyer.github.io</dd>

        <dt>FOLDERS</dt>
        <dd>
          <i class="fa fa-folder-open"></i>home</dd>
        <dd class="file current">cosyer.github.io</dd>
        <dd>
          <a href="#about">
            <i class="fa fa-folder"></i>about</a>
        </dd>
        <dd>
          <a href="#works">
            <i class="fa fa-folder"></i>works</a>
        </dd>
        <dd>
          <a href="#skills">
            <i class="fa fa-folder"></i>skills</a>
        </dd>
        <dd>
          <a href="#contact">
            <i class="fa fa-folder"></i>contact</a>
        </dd>
      </dl>
    </div>

    <div class="main">
      <div class="tabs">
        <div class="tab">
          cosyer.github.io
          <span class="fa-stack" id="close">
            <i class="fa fa-square fa-stack-2x"></i>
            <i class="fa fa-times fa-stack-1x fa-inverse"></i>
          </span>
        </div>
      </div>
      <div class="body">
        <div class="lines">
          1
          <br />2
          <br />3
          <br />4
          <br />5
          <br />6
          <br />7
          <br />8
          <br />9
          <br />10
          <br />11
          <br />12
          <br />13
          <br />14
          <br />15
          <br />16
          <br />17
          <br />18
          <br />19
          <br />20
          <br />21
          <br />22
          <br />23
          <br />24
          <br />25
          <br />26
          <br />27
          <br />28
          <br />29
          <br />30
          <br />31
          <br />32
          <br />33
          <br />34
          <br />35
          <br />36
          <br />37
          <br />38
          <br />39
          <br />40
        </div>
        <pre><code id="comment">/************************************
* cosyer.github.io
*
* Please program while scrolling :)
************************************/</code>
<code id="code">console.log('Hello, World');


const me = new Human(); // 1995-06-04

me.name = 'Chen Yu';
me.job = 'Front-end Engineer';

while (me.isLive()) {
  me.coding();
  me.eat();
  me.sleep();
}

console.log(me.getLastFeeling()); // How do I feel last time?
</code></pre>
      </div>

      <div id="scroll_attention" data-0="opacity:1;" data-200="opacity:0;">
        Please Scroll
        <br />
        <div class="down_arrow"></div>
      </div>
    </div>

    <div id="global_navi">
      <div class="editor_foot">
        <div class="float_left">
          INSERT MODE, Line
          <span id="line-num">1</span>, Column
          <span id="col-num">1</span>
        </div>
        <div class="float_right">
          <span class="charset">UTF-8</span>
          <span>JavaScript</span>
        </div>
      </div>

      <div class="navi_menu">
        <div class="logo cf">
          <a href="#home">
            <span>cosyer</span>
          </a>
        </div>
        <ul>
          <li>
            <a href="#about">ABOUT</a>
          </li>
          <li>
            <a href="#skills">SKILLS</a>
          </li>
          <li>
            <a href="#works">WORKS</a>
          </li>
          <li>
            <a href="#contact">CONTACT</a>
          </li>
        </ul>
        <span id="navi_marker" data-7900="bottom:-5px;" data-8000="bottom:0px;" data-14300="right:385px;" data-14400="right:273px;"
          data-16500="right:273px;" data-16600="right:162px;" data-21900="right:162px;" data-22000="right:43px;"></span>
      </div>
    </div>
    <!--/ global_navi -->
  </div>
  <!--/ home -->

  <div id="bg1" data-3500="top:60%;" data-8000="top:-100%; display: block;" data-13000="display:none;"></div>
  <div class="white_text" data-4500="top:45%;" data-10000="top:100%;">"Hello, World"</div>

  <div id="about" data-4500="top:100%;" data-8000="top:0%;" data-11300="top:0%;" data-14000="top:-100%;" data-16600="top:-100%;"
    data-16700="top:-200%">
    <h2>ABOUT</h2>
    <div class="wrap">
      <div class="image">
        <img src="img/profile.png" alt="cosyer">
      </div>
      <div class="textbox">
        <div class="text" data-8500="opacity:1;z-index:10;" data-8800="opacity:0;z-index:0;">
          <h3>陈 宇</h3>
          <p>
            现居于南京, 一名喜欢二次元，喜爱折腾，好奇新事物的95后。学习是一个充实愉悦的过程，热爱编程，也热爱一切美好的事物。
            <br>
            <br> 服务端和前端都很有趣O(∩_∩)O，前端更贴近用户，这种体验非常美妙!
            <br>
            <br>人没有的牺牲的话就什么也得不到，为了得到某些东西，就必须付出同等的代价！
            <br>
            <br>
          </p>
        </div>
        <div class="text" data-8800="opacity:0;" data-9100="opacity:1;" data-10000="opacity:1;" data-10300="opacity:0;">
          <h3>history</h3>
          <p>
            大学专业是电子信息科学与技术，大三开始正式接触、学习Java和Web开发。
            <br /> 兴趣是建设网站、敲代码解决问题。
            <br /> 以成为一个技术高超的程序员为目标不断努力着。
            <br /> 大四在新媒的实习让我真正的参与到了项目的开发中，了解了开发流程和业务逻辑，积累了许多有用的工作经验，技术上有了很大的提升。
            <br />
          </p>
        </div>
        <div class="text" data-10300="opacity:0;" data-10600="opacity:1;">
          <h3>mind</h3>
          <p>
            需要不断的思考如何能做到更好。
            <br> 编程不是一种手段，而是一种目的。思考塑造干净的设计，干净的代码，有效的方式也是非常有趣的事。
            <br> 我更愿意仔细谨慎地仔细实施设计，而不是在以后花费时间来修复错误。
            <br> 编写代码毕竟是最有趣的。
          </p>
        </div>
        <div class="marker_area">
          <span class="pointer" data-8850="left:13px;" data-9150="left:53px;" data-10350="left:53px;" data-10750="left:93px;"></span>
          <div class="marker_wrap">
            <span class="marker"></span>
            <span class="marker"></span>
            <span class="marker"></span>
          </div>
        </div>
      </div>
    </div>

    <div id="skills">
      <h2>SKILLS</h2>
    </div>
  </div>
  <!--/ about -->

  <div id="skills_body" data-9500="display: none;" data-10000="display:block;" data-16600="display: none;">
    <ul class="graphs" data-10000="left: -25%;" data-14000="left: 30%;">
      <li data-13000="margin-top: -100%;" data-14000="margin-top: 0%;" data-15000="margin-top: 0%;" data-16000="margin-top: -200%;">
        <div class="graph">
          <div class="graph_inner" data-13000="margin-top: 400px;" data-14400="margin-top: 60px;"></div>
        </div>
        <div class="title">HTML</div>
        <div class="image">
          <img src="img/skills_html.png" alt="HTML">
        </div>
      </li>
      <li data-12500="margin-top: -100%;" data-14000="margin-top: 0%;" data-15150="margin-top: 0%;" data-16150="margin-top: -200%;">
        <div class="graph">
          <div class="graph_inner" data-13000="margin-top: 400px;" data-14400="margin-top: 45px;"></div>
        </div>
        <div class="title">CSS</div>
        <div class="image">
          <img src="img/skills_css.png" alt="HTML">
        </div>
      </li>
      <li data-12000="margin-top: -100%;" data-14000="margin-top: 0%;" data-15300="margin-top: 0%;" data-16300="margin-top: -200%;">
        <div class="graph">
          <div class="graph_inner" data-13000="margin-top: 400px;" data-14400="margin-top: 60px;"></div>
        </div>
        <div class="title">JavaScript</div>
        <div class="image">
          <img src="img/skills_js.png" alt="HTML">
        </div>
      </li>
    </ul>
    <ul class="graphs" data-10000="right: -25%;" data-14000="right: 30%;">
      <li data-12000="margin-top: -100%;" data-14000="margin-top: 0%;" data-15450="margin-top: 0%;" data-16450="margin-top: -200%;">
        <div class="graph">
          <div class="graph_inner" data-13000="margin-top: 400px;" data-14400="margin-top: 110px;"></div>
        </div>
        <div class="title">React</div>
        <div class="image">
          <img src="img/skills_react.png" alt="HTML">
        </div>
      </li>
      <li data-12500="margin-top: -100%;" data-14000="margin-top: 0%;" data-15600="margin-top: 0%;" data-16600="margin-top: -200%;">
        <div class="graph">
          <div class="graph_inner" data-13000="margin-top: 400px;" data-14400="margin-top: 160px;"></div>
        </div>
        <div class="title">Node</div>
        <div class="image">
          <img src="img/skills_nodejs.png" alt="HTML">
        </div>
      </li>
      <li data-13000="margin-top: -100%;" data-14000="margin-top: 0%;" data-15750="margin-top: 0%;" data-16750="margin-top: -200%;">
        <div class="graph">
          <div class="graph_inner" data-13000="margin-top: 400px;" data-14400="margin-top: 90px;"></div>
        </div>
        <div class="title">Java</div>
        <div class="image">
          <img src="img/skills_java.png" alt="HTML">
        </div>
      </li>
    </ul>
  </div>
  <!--/ skills_body -->

  <div id="works" data-15500="right: 100%;" data-16600="right: 0;" data-17500="top: 0%;" data-19500="top: -150%;">
    <h2>WORKS</h2>
    <ul id="work_list" class="flips images cf">
      <li>
        <a class="flip" href="http://dir.mydearest.cn/thinkcmf/" target="_blank">
          <div class="off">
            <i class="fa fa-calendar"></i>
            <span>重庆渝商再生资源官网</span>
          </div>
          <img class="on" src="img/work1.png" alt="重庆渝商再生资源官网" />
        </a>
      </li>
      <li>
        <a class="flip" href="http://dir.mydearest.cn/motion/" target="_blank">
          <div class="off">
            <i class="fa fa-check-square-o"></i>
            <span>网站demo
              <br />react + ant Design
            </span>
          </div>
          <img class="on" src="img/work2.png" alt="网站demo" />
        </a>
      </li>
      <li>
        <a class="flip" href="http://dir.mydearest.cn/you-draw-i-guess/" target="_blank">
          <div class="off">
            <i class="fa fa-code"></i>
            <span>在线你画我猜
              <br>Vue + socket.io</span>
          </div>
          <img class="on" src="img/work3.png" alt="在线你画我猜" />
        </a>
      </li>
      <li>
        <a class="flip" href="http://mydearest.cn" target="_blank">
          <div class="off">
            <i class="fa fa-book"></i>
            <span>个人博客
              <br>学习进阶之路</span>
          </div>
          <img class="on" src="img/work4.png" alt="个人博客" />
        </a>
      </li>
    </ul>
  </div>
  <!--/ works -->

  <div id="bg2" data-15500="top:0%;" data-22000="top:-100%;"></div>
  <div class="white_text" data-17500="top:-20%;" data-22000="top:100%;">"Stay Hungry,Stay Foolish."</div>
  </div>

  <div id="contact" data-18800="top:100%;" data-22000="top:0%;">
    <h2>CONTACT</h2>

    <ul id="links" class="cf">
      <li>
        <a href="https://twitter.com/yzchenyu1995" target="_blank">
          <img src="img/link_twitter.png" alt="twitter" />
        </a>
      </li>
      <li>
        <a href="https://www.facebook.com/profile.php?id=100025666071215" target="_blank">
          <img src="img/link_facebook.png" alt="facebook" />
        </a>
      </li>
      <li>
        <a href="http://www.cnblogs.com/cosyer/" target="_blank">
          <img src="img/link_hatenablog.png" alt="blog" />
        </a>
      </li>
      <li>
        <a href="https://github.com/cosyer" target="_blank">
          <img src="img/link_github.png" alt="github" />
        </a>
      </li>
      <li>
        <a href="mailto:chenyu@mydearest.cn" target="_blank">
          <img src="img/link_mail.png" alt="mail" />
        </a>
      </li>
    </ul>

    <div id="copyright" data-21930="opacity:0;" data-22000="opacity:1;">2018 &copy; cosyer</div>
    <!-- 
    <ul id="share">
      <li class="twitter">
        <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://cosyer.github.io/" data-via="yzchenyu1995">Tweet</a>
      </li>

      <li class="facebook">
        <iframe src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fcosyer.github.io%2F&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21"
          scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>
      </li>
      <li class="hatena">
        <a href="http://b.hatena.ne.jp/entry/https://cosyer.github.io/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon"
          data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加">
          <img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20"
            style="border: none;" />
        </a>
      </li>
      <li class="github">
        <iframe src="http://ghbtns.com/github-btn.html?user=cosyer&repo=cosyer.github.io&type=watch&count=true" allowtransparency="true"
          frameborder="0" scrolling="0" width="110" height="20"></iframe>
      </li>
    </ul> -->

  </div>

  <div id="back">
    <a href="#home"></a>
  </div>

  <script type="text/javascript">
    hljs.initHighlightingOnLoad();
    skrollr.init();

    (function (i, s, o, g, r, a, m) {
      i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
        (i[r].q = i[r].q || []).push(arguments)
      }, i[r].l = 1 * new Date(); a = s.createElement(o),
        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
    ga('create', 'UA-60995437-1', 'auto');
    ga('send', 'pageview');
    var year = new Date().getFullYear();
    var $copyright = document.getElementById("copyright");
    $copyright.innerHTML = year + ' &copy; cosyer'
  </script>

  <script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
  <script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</body>

</html>